<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
	当你有一些数据需要随着其它数据变动而变动时，也可以用侦听属性 watch
	建议：
	1.能用计算属性的，不要用侦听属性
	2.当需要在数据变化时执行异步或开销较大的操作时，建议用侦听属性。
-->
		<div id="app">
			<h3>当地空气PM25值:{{pm25}}</h3>
			<img :src="pm25img">
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						pm25: 21,
						pm25img: "../img/1.png",
					}
				},

				watch: {
					pm25(newValue) {
						let index = 0;
						if (newValue < 100) index = 1;
						else if (newValue < 200) index = 2;
						else if (newValue < 300) index = 3;
						else index = 4;
						this.pm25img = `../img/${index}.png`;
					},
				},
			}).mount("#app");
			//测试: 在F12->console->vm.pm25 = 234
		</script>
	</body>

</html>